<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
<!--
    img标签:图片标签,行级标签
    当图片放不下时,会自动换行
    src属性:指定图片的地址,一般使用相对路径来表示
    alt属性:当图片地址有误时,显示的文本内容
    title属性:指定图片的标题
        当鼠标悬停在图片上时,会显示标题内容
    width/height属性:指定图片的宽度与高度
        当图片指定了宽度或者高度中的一个时,另一个属性会等比例变化
        如果同时指定宽度与高度,图片会变形
        当图片放大时,清晰度会降低
    注意:
        在PC端开发时,不建议改变图片大小
        需要多大的图片,就剪裁多大的图片
        在手机端开发,经常会对图片进行缩放
    常见图片格式
        jpeg(jpg)
            支持的颜色比较丰富,不支持透明度效果,不支持动态图片
            一般用于显示照片
        gif
            支持的颜色比较少,支持简单的透明处理,支持动态图片
            颜色比较单一,一般用于动图
        png
            支持的颜色比较丰富,支持复杂透明度处理,不支持动态图片
            转为网页而生
-->
<img src="../images/heihei.gif" alt="加载图片失败" title="今天心情很好" >
<img src="../images/heihei.gif" alt="加载图片失败" title="今天心情很好" width="500px">
<img src="../images/1.gif" alt="加载图片失败" title="跳个舞吧"  width="200px">
<img src="../images/2.gif" alt="加载图片失败" title="打一架吧"  width="300px" height="500px">
<img src="../images/3.gif" alt="加载图片失败">
<img src="../images/4.gif" alt="加载图片失败">
<img src="../images/4.jpg" alt="加载图片失败">
</body>
</html>